<template>
  <div class="login">
    <!-- Nav板块 -->
    <van-nav-bar title="登录Login" left-arrow border @click-left="onClickLeft"/>
    <!-- 主体 -->
     <div class="center">
      <div class="title">手机号登录</div>
      <p class="tips">未注册的手机号登录后将自动注册</p>
      <!-- 注册表单 -->
        <div class="boderButtom ">
           <input v-model="phoneNum" type="text" name="phoneNum" class="phoneNum" placeholder="请输入手机号码">
        </div>
        <div class="boderButtom ">
           <input v-model="picCode" type="text" name="phoneNum" class="phoneNum" placeholder="请输入图形验证码">
           <img v-if="picUrl" :src="picUrl" @click="getPicCode" alt="">
        </div>
         <div class="boderButtom ">
           <input v-model="smsCode" type="text" name="phoneNum" class="phoneNum" placeholder="请输入短信验证码">
           <button ref="btn" @click="getCode" class="getCaptcha">{{second === totalSecond? '获取验证码':second+'秒后重新发送'}}</button>
        </div>
        <!-- 登录按钮 -->
        <van-button  @click="login" class="btn" round type="primary" block color="linear-gradient(to right, #f2b239, #ee0a24)">登 录</van-button>
     </div>
  </div>
</template>

<script>
import { getPicCode, getMsgCode, login } from '@/api/login'
export default {
  name: 'LoginIndex',
  data () {
    return {
      phoneNum: '', // 用户输入的手机号
      picCode: '', // 用户输入的图形验证码
      picKey: '', // 将来请求传递的验证码唯一标识
      picUrl: '', // 存储请求渲染的图形地址
      totalSecond: 60, // 总秒数
      second: 60, // 当前秒数 开启定时器 second--
      timmer: null, // 定时器id
      smsCode: '' // 用户输入的短信验证码
    }
  },
  async created () {
    this.getPicCode()
  },
  // 当前组件被销毁时
  destroyed () {
    // 离开页面清除定时器
    clearInterval(this.timer)
  },
  methods: {
    // 左上角箭头返回上一级路由
    onClickLeft () {
      this.$router.go(-1)
    },
    // 校验 手机号和图形验证码是否合法
    validFn () {
      // 通过校验返回true 不通过则返回false
      if (!/^1[3-9]\d{9}$/.test(this.phoneNum)) {
        this.$toast('请输出正确的手机号')
        return false
      }
      if (!/^\w{4}$/.test(this.picCode)) {
        this.$toast('请输出正确的图形验证码')
        return false
      }
      return true
    },
    // 获取图形验证码
    async getPicCode () {
      const { data: { base64, key } } = await getPicCode()
      this.picUrl = base64// 存储地址
      this.picKey = key// 存储唯一标识
    },
    // 获取短信验证码
    async getCode () {
      // 如果没有通过校验则return
      if (!this.validFn()) {
        return
      }
      // ban掉按钮 防抖
      this.$refs.btn.disabled = true
      // 当定时器开着 且总秒数和倒计时一直（秒数归位）才能再次开启
      if (!this.timer && this.second === this.totalSecond) {
        // console.log(this.$refs.btn)

        // 发送请求（预期：希望如果响应的status非200 抛出一个错误 await只会等待成功的promise）
        await getMsgCode(this.picCode, this.picKey, this.phoneNum)
        // console.log(res)
        // 响应状态码为200代表成功 发送提示
        this.$toast('发送成功,请注意查收')
        // 开启定时器
        this.timmer = setInterval(() => {
          console.log('计时器')
          this.second--
          if (this.second < 1) {
            clearInterval(this.timmer)
            this.timmer = null // 重置定时器id
            this.second = this.totalSecond // 秒数归位
            this.$refs.btn.disabled = false// 解除按钮
          }
        }, 1000)
      }
      // 提示信息
    },
    // 登录
    async login () {
      // 校验手机号和验证码
      if (!this.validFn()) {
        return
      }
      // 校验短信验证码是否合法
      if (!/^\d{6}$/.test(this.smsCode)) {
        this.$toast('请输出正确的短信验证码')
        return
      }
      const res = await login(this.phoneNum, this.smsCode)
      console.log(res)
      // 已添加响应拦截器 只需要考虑正确情况
      // 验证码错误时
      if (res.status !== 200) {
        this.$toast('请输出正确的短信验证码')
        return
      }
      // 提交个人数据
      this.$store.commit('user/setUserInfo', res.data)
      this.$toast.success('登录成功')
      // 跳转到上一级路由
      this.$router.go(-1)
    }
  }

}
</script>

<style lang="less" scoped>
.center{
  margin-top: 30px;
  padding: 20px;
  .title{
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .tips{
    font-size: 14px;
    color: #ccc;
  }
  .boderButtom{
      position: relative;
      margin-top:20px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 10px;
      border-bottom:1px solid #ccc ;
      .phoneNum{
      width: 100%;
      height: 45px;
      border:none;
      }
      //文字内提示词的样式
      .phoneNum::-webkit-input-placeholder{
        color: #767675;
        font-size: 14px;
      }
      .getCaptcha{
          position: absolute;
        right: 15px;
        top: 15px;
        background-color: white;
        font-size: 16px;
        color: #c7ae90;
        border: 0;
      }
      img{
        position: absolute;
        right: 15px;
        top: 10px;
        width: 90px;
      }
  }
  .btn{
    margin-top: 50px;
    font-size: 16px;
  }
}
</style>
